<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘宝网-淘！我喜欢</title>
    <link rel="stylesheet" href="demo.css">
</head>

<body>
    <div class="wrapper">
        <!-- 顶部导航 -->
        <div class="top-nav-wrap">
            <div class="top-nav">
                <ul class="top-nav-l">
                    <li class="top-nav-menu china">
                        <span class="china-span">中国大陆</span>
                        <span class="bgPic xsjPic"></span>
                    </li>
                    <li class="top-nav-menu loginAndReg">
                        <a href="#" class="login">亲，请登录</a>
                        <a href="#" class="reg">免费注册</a>
                    </li>
                    <li class="top-nav-menu phone">
                        <a href="#">手机逛淘宝</a>
                    </li>
                </ul>
                <ul class="top-nav-r">
                    <li class="top-nav-menu myTaobao">
                        <a href="#">我的淘宝</a>
                        <span class="bgPic xsjPic"></span>
                    </li>
                    <li class="top-nav-menu shopCar">
                        <a href="#">
                            <span class="bgPic shopCarPic"></span>
                            <span>购物车</span>
                        </a>
                    </li>
                    <li class="top-nav-menu like">
                        <a href="#">
                            <span class="bgPic likePic"></span>
                            <span>收藏夹</span>
                        </a>
                        <span class="bgPic xsjPic"></span>
                    </li>
                    <li class="top-nav-menu goods">
                        <a href="#">商品分类</a>
                    </li>
                    <li class="top-nav-menu cutOff">
                        <span>|</span>
                    </li>
                    <li class="top-nav-menu seller">
                        <a href="#">卖家中心</a>
                        <span class="bgPic xsjPic"></span>
                    </li>
                    <li class="top-nav-menu">
                        <a href="#">联系客服</a>
                        <span class="bgPic xsjPic"></span>
                    </li>
                    <li class="top-nav-menu">
                        <a href="#">
                            <span class="bgPic webNavPic"></span>
                            <span>网站导航</span>
                        </a>
                        <span class="bgPic xsjPic"></span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 搜索框部分 -->
        <div class="search-wrap">
            <div class="search-con">
                <div class="logo-box">
                    <img src="img/logo.png" alt="">
                </div>
                <div class="search-box">
                    <div class="search-bd">
                        <div class="search-tab">
                            <ul>
                                <li class="select">宝贝</li>
                                <li>天猫</li>
                                <li>店铺</li>
                            </ul>
                        </div>
                        <div class="search-panel">
                            <a href="#" class="sousuo"></a>
                            <form action="">
                                <div class="btn">
                                    <button>搜索</button>
                                </div>
                                <div class="search-inp-box">
                                    <div class="search-inp">
                                        <input type="text" placeholder="五子棋雾化芯">
                                    </div>
                                </div>
                            </form>
                            <a href="#" class="camera"></a>
                        </div>
                    </div>
                    <div class="search-ft">
                        <ul>
                            <li>
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">春装</a>
                            </li>
                            <li class="select">
                                <a href="#">运动鞋</a>
                            </li>
                            <li>
                                <a href="#">男士外套</a>
                            </li>
                            <li>
                                <a href="#">墙纸</a>
                            </li>
                            <li>
                                <a href="#">耳机</a>
                            </li>
                            <li>
                                <a href="#">男鞋</a>
                            </li>
                            <li>
                                <a href="#">行车记录仪</a>
                            </li>
                            <li>
                                <a href="#">半身裙</a>
                            </li>
                            <li>
                                <a href="#">短裤</a>
                            </li>
                            <li>
                                <a href="#">连衣裙</a>
                            </li>
                        </ul>
                        <a href="#" class="more">更多 > </a>
                    </div>
                </div>
                <div class="code-box">
                    <a href="#" class="p-tb">手机淘宝</a>
                    <a href="#" class="code"></a>
                    <a href="#" class="close">x</a>
                </div>
            </div>
        </div>
        <!-- 中间导航 -->
        <div class="screen-nav-wrap">
            <div class="screen-nav-con">
                <h2>主题市场</h2>
                <ul>
                    <li>
                        <a href="#">天猫</a>
                    </li>
                    <li>
                        <a href="#">聚划算</a>
                    </li>
                    <li>
                        <a href="#">天猫超市</a>
                    </li>
                </ul>
                <ul>
                    <li>|</li>
                    <li>
                        <a href="#">淘抢购</a>
                    </li>
                    <li>
                        <a href="#">电器城</a>
                    </li>
                    <li>
                        <a href="#">司法拍卖</a>
                    </li>
                    <li>
                        <a href="#">中国制造</a>
                    </li>
                    <li>
                        <a href="#">兴农扶贫</a>
                    </li>
                </ul>
                <ul>
                    <li>|</li>
                    <li>
                        <a href="#">飞猪旅行</a>
                    </li>
                    <li>
                        <a href="#">智能生活</a>
                    </li>
                    <li>
                        <a href="#">苏宁易购</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 中间内容 -->
        <div class="screen-box-wrap">
            <div class="main">
                <div class="main-inner">
                    <div class="inner-left">
                        <ul>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                            <li>
                                <a href="#">男装</a> /
                                <a href="#">男装</a> /
                                <a href="#">女装</a>
                            </li>
                        </ul>
                    </div>
                    <div class="inner-con">
                        <div class="pic-box">
                            <a href="#">
                                <img src="img/pic2.png" alt="">
                            </a>
                            <ul class="list">
                                <li>
                                    <a href="#"></a>
                                </li>
                                <li>
                                    <a href="#" class="select"></a>
                                </li>
                                <li>
                                    <a href="#"></a>
                                </li>
                                <li>
                                    <a href="#"></a>
                                </li>
                                <li>
                                    <a href="#"></a>
                                </li>
                                <li>
                                    <a href="#"></a>
                                </li>
                            </ul>

                        </div>
                        <div class="inner-mall">
                            <div class="head">
                                <span class="tm-pic"></span>
                                <span class="tm">理想生活上天猫</span>
                            </div>
                            <a href="#">
                                <img src="img/pic3.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-middle">
                    <a href="#" class="middle-pic1">
                        <img src="./img/pic1.png" alt="">
                    </a>
                    <div class="middle-pic2">
                        <h5>今日热卖</h5>
                        <a href="#">
                            <img src="./img/pic4.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="main-bottom">
                    <div class="bottom-con">
                        <div class="logo">
                            <img src="img/tbtt.png" alt="">
                        </div>
                        <a href="#" class="tbttCon">
                            <img src="img/pic5.png" alt="">
                            <h4>60岁阿姨相亲靠购物车脱单，开心就好</h4>
                            <p>现场60岁阿姨和54岁大叔通过彼此购物车清单，了解到对方喜欢游泳和健身便走到了一起。直言他健身我游泳有共同爱好就好，谢霆锋和王菲相差十多岁都没关系，做朋友又不是为了钱为了房，两个人志同道合、开心就好。</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-right">
                <div class="member">
                    <div class="member-bd">
                        <div class="tx">
                            <a href="#">
                                <img src="./img/tx.jpg" alt="">
                            </a>
                        </div>
                        <span class="hello">Hi! 你好</span>
                        <p>
                            <a href="#" class="icon">
                                <span class="pic"></span>
                                淘金币领钱
                            </a>
                            <a href="#" class="club">
                                <span class="pic"></span>
                                会员俱乐部
                            </a>
                        </p>
                    </div>
                    <div class="member-ft">
                        <a href="#" class="login">登录</a>
                        <a href="#">注册</a>
                        <a href="#">开店</a>
                    </div>
                </div>
                <div class="message">
                    <a href="#">
                        网上举报有害信息
                        <span></span>
                    </a>
                </div>
                <div class="notice">
                    <div class="title">
                        <ul>
                            <li>
                                <a href="#">公告</a>
                            </li>
                            <li>
                                <a href="#">规则</a>
                            </li>
                            <li>
                                <a href="#">论坛</a>
                            </li>
                            <li>
                                <a href="#">安全</a>
                            </li>
                            <li class="select">
                                <a href="#">公益</a>
                            </li>
                        </ul>
                    </div>
                    <div class="con">
                        <ul>
                            <li>
                                <a href="#" class="select">九寨沟地震紧急救援</a>
                            </li>
                            <li>
                                <a href="#" class="select">公益宝贝卖家准入公告</a>
                            </li>
                            <li>
                                <a href="#">致百万商家的感谢信</a>
                            </li>
                            <li>
                                <a href="#">公益宝贝卖家发票索取</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="moudle">
                    <ul>
                        <li>
                            <a href="#">
                                <span class="pic1"></span>
                                <p>充话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic2"></span>
                                <p>旅行</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic3"></span>
                                <p>车险</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic4"></span>
                                <p>游戏</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic5"></span>
                                <p>彩票</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic6"></span>
                                <p>电影</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic7"></span>
                                <p>酒店</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic8"></span>
                                <p>理财</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic9"></span>
                                <p>找服务</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic10"></span>
                                <p>演出</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic11"></span>
                                <p>水电煤</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="pic12"></span>
                                <p>火车票</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="app">
                    <h3>阿里APP 
                        <a href="#">更多></a>
                    </h3>
                    <ul>
                        <li><a href="#"><img src="img/smalllogo1.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo2.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo3.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo4.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo5.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo6.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo7.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo8.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo9.png" alt=""></a></li>
                        <li><a href="#"><img src="img/smalllogo10.png" alt=""></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>